<template>
    <table class="data-table">
        <tr>
            <th>公司名称</th>
            <th>工作名称</th>
            <th>薪资</th>
            <th>所在城市</th>
            <th>学历要求</th>
        </tr>
        <tr v-for="item in data">
            <td>{{ item.brand_name }}</td>
            <td>{{ item.job_name }}</td>
            <td>{{ item.salary_desc }}</td>
            <td>{{ item.city_name }}</td>
            <td>{{ item.job_degree }}</td>
        </tr>
    </table>
</template>
<script>
import { getScrollData } from '@/api/base.js';

export default {
    data() {
        return {
            data: '',
            sub_data: '',
        }
    },
    mounted() {
        this.getScrollData()
    },
    methods: {
        getScrollData() {
            console.log("qifei")
            getScrollData().then(res => {
                console.log(res.data)
                this.data = res.data.slice(0, 4)
                this.sub_data = res.data.slice(4)   // 切片，前一半，后一半

                console.log("Show!!")
                console.log(this.sub_data)
                console.log(this.sub_data)

                // 开始滚动
                setInterval(() => {
                    var top = this.data[0];
                    var next = this.sub_data[0];

                    this.data.shift();
                    this.sub_data.shift();

                    this.data.push(next);
                    this.sub_data.push(top);
                }, 1000)
            })
        }
    }
}

</script>


<style scoped>
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /*  固定表格 */
}

.data-table th,
.data-table td {
    padding: 8px;
    text-align: center;
    /* border: 1px solid rgb(197, 199, 201); */
}

.data-table th {
    /* background-color: #f2f2f2; */
}

.data-table td {
    padding: 10px;
    color: rgb(234, 234, 157);
    text-overflow: ellipsis;
    /* 如果内容过长，使用省略号表示 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */

}
</style>